
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相亲寻缘-成都田水鱼网络科技有限公司</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: auto;
            min-height: 100vh;
            position: relative;
        }

        #app {
            position: relative;
            height: 100%;
            width: 100%;
            max-width: 480px;
            min-height: 960px;
            overflow: auto;
            background-image: url("./imgs/bg.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            left: 50%;
            transform: translateX(-50%);
        }

        input {
            border: 0;
            outline: none;
            background-color: rgba(0, 0, 0, 0);
            font-family: "微软雅黑", sans-serif;
        }

        input::-webkit-input-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            padding-left: 10px; /* Add padding to the left */
        }

        input::-moz-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            padding-left: 10px; /* Add padding to the left */
        }

        input:-moz-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            padding-left: 10px; /* Add padding to the left */
        }

        input:-ms-input-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            padding-left: 10px; /* Add padding to the left */
        }

        .inpyzm input::-webkit-input-placeholder {
            color: rgb(255, 255, 255);
            font-size: 20px;
            padding-left: 10px; /* Add padding to the left */
        }

        .logo {
            position: absolute;
            width: 230px;
            height: 55px;
            top: 12%;
            left: 50%;
            transform: translateX(-50%) scale(1.1, 1.1);
            font-family: "微软雅黑", sans-serif;
            font-weight: 700;
            font-size: 34px;
            line-height: 127px;
            letter-spacing: 3px;
            text-align: right;
            color: rgb(255, 255, 255);
        }
        .vCodeLogin {
            position: absolute;
            width: 80%;
            height: 58px;
            top: 60%;
            left: 10%;
            background-image: url("imgs/0.png");
            border: none; /* 确保没有边框 */
            border-radius: 40px;
            background-size: cover; /* 背景图片按比例缩放以完全覆盖元素 */
            background-position: center; /* 背景图片在元素中居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            box-shadow: none; /* 确保没有阴影效果 */
        }

        .vCodeLogin span {
            position: relative;
            transform: translateY(-50%);
            font-family: "微软雅黑", sans-serif;
            font-weight:400;
            font-size: 30px;
            line-height:58px;
            letter-spacing: 2px;
            color: #ffffff;
            text-align: center;
        }

        input {
            border: 0;
            outline: none;
            background-color: rgba(0, 0, 0, 0);
            font-family: "微软雅黑", sans-serif;
        }

        .inp {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 50px;
            background-color: #fff;
            border-radius: 21px;
            top: 28%;
            font-size: 20px;
            color: #000000;
            text-align: center;
            display: inline-block;
        }
        .inp::-webkit-input-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center; /* Center vertically */
            height: 100%; /* Match the height of the input */
        }

        .inp::-moz-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .inp:-moz-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .inp:-ms-input-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .verification-container {
            position: relative; /* 确保子元素以此为参考 */
            width: 100%;
            top: 36%; /* 距离顶部 36% */
            left: 50%;
            transform: translateX(-50%);
        }

        .inpyzm {
            position: absolute;
            left: 50px;
            top: 340px;
            width: 80%;
            height: 50px;
            background-color: rgba(255, 255, 255, 0); /* Transparent background */
            border-radius: 21px;
            font-size: 20px;
            color: #000000;
            text-align: left;
            display: inline-block;
            padding-left: 10px;
            border: 1px solid white; /* White border */
            box-sizing: border-box;
            z-index: 1; /* 确保在其他元素之上 */
        }

        .inpyzm::-webkit-input-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(255, 255, 255);
            font-size: 20px;
            padding-left: 10px;
            display: inline-block;
            line-height: 50px; /* Vertically center the placeholder */
        }

        .inpyzm::-moz-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(255, 255, 255);
            font-size: 20px;
            padding-left: 10px;
            line-height: 50px;
        }

        .inpyzm:-moz-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(255, 255, 255);
            font-size: 20px;
            padding-left: 10px;
            line-height: 50px;
        }

        .inpyzm:-ms-input-placeholder {
            font-family: "微软雅黑", sans-serif;
            color: rgb(207, 109, 188);
            font-size: 20px;
            padding-left: 10px;
            line-height: 50px;
        }

        vCodeLogin {
            position: relative;
        }
        .vCode {
            position: absolute;
            right: 56px; /* 按钮距离右侧的距离 */
            top: 346px; /* 垂直居中的位置 */
            transform: translateY(0);
            width: 120px;
            height: 36px;
            border-radius: 30px;

            /* 使用现代 CSS 渐变语法，确保跨浏览器兼容性 */
            background: linear-gradient(to right, rgb(207, 109, 188), rgba(207, 109, 188, 0));
            background-size: cover; /* 确保背景覆盖整个元素 */
            background-position: center;
            background-repeat: no-repeat;

            /* 字体和文本样式 */
            font-size: 18px;
            color: #ffffff; /* 使用简写 */
            text-align: center;

            /* 按钮样式 */
            border: none;
            cursor: pointer;

            /* 确保按钮在其他元素之上 */
            z-index: 2;

            /* 可选：增加过渡效果以提高用户体验 */
            transition: background 0.3s ease;
        }

        /* 可选：添加悬停效果 */
        .vCode:hover {
            /* 例如，改变颜色或增加阴影 */
            background: linear-gradient(to right, rgba(207, 109, 188, 0.8), rgba(207, 109, 188, 0));
        }

        .vCode span {
            position: relative;
            transform: translateY(-50%);
        }

        .xieyi {
            color:rgb(184, 18, 163);
            font-family: "微软雅黑", sans-serif;
            font-weight: 600;
            font-size: 14px;
            padding-left: 10px;
            line-height: 50px;
            height: 60px;
            width: 800px;
            margin-left: 10px;
            top: -14px;
            position: absolute;
        }

        .xieyi01 {
            color: rgb(184, 18, 163);
            font-family: "微软雅黑", sans-serif;
            font-weight: 600;
            font-size: 14px;
            padding-left: 10px;
            line-height: 50px;
            height: 60px;
            width: 800px;
            margin-left: 10px;
            top: 4px;
            position: absolute;
        }

        .checkbox-container {
            position: absolute;
            margin-top: 10px; /* 可根据需要调整 */
            top: 410px;
            margin-left: 52px;
        }

        /* 自定义复选框样式 */
        .custom-checkbox {
            display: inline-block;
            position: relative;
            width: 14px;    /* 设置复选框的宽度 */
            height: 14px;   /* 设置复选框的高度 */
            background-color: #ffffff;  /* 背景色，可根据需要调整 */
            border: 1px solid #cccccc;  /* 边框色，可根据需要调整 */
            margin-right: 8px;          /* 复选框与文本之间的间距，可根据需要调整 */
        }

        /* 隐藏原生的复选框 */
        .custom-checkbox input[type="checkbox"] {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
        }

        /* 当复选框被选中时，显示勾选符号，并改变背景色和边框色 */
        .custom-checkbox input[type="checkbox"]:checked + ::after {
            content: '✔';  /* 勾选符号，可以根据需要选择其他符号或图标 */
            position: absolute;
            top: -2px;      /* 根据字体大小和复选框尺寸调整位置 */
            left: 2px;      /* 根据字体大小和复选框尺寸调整位置 */
            color: #ffffff; /* 勾选符号颜色，可根据需要调整 */
            font-size: 12px; /* 字体大小，可根据需要调整以适应复选框尺寸 */
            background-color: #007bff; /* 改变背景色，表示选中状态 */
            border-color: #007bff;     /* 改变边框色，与背景色一致 */
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 14px; /* 使勾选符号垂直居中，根据复选框高度调整 */
        }

        /* 如果需要，可以添加一些额外的交互效果，如hover状态 */
        .custom-checkbox:hover input[type="checkbox"]:not(:checked) + ::after {
            background-color: #f0f0f0; /* hover时未选中状态的背景色变化 */
        }



        .distpicker {
            position: absolute;
            left: 50%;
            top: 44%;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
        }

        .btn {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%);
            cursor: pointer;
            background-image: url("./assets/ann@2x.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            width: 297px;
            height: 72px;
            line-height: 72px;
            font-size: 18px;
            color: #FFFFFF;
            text-align: center;
        }

        .box {
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translateX(-50%);
            width: 93%;
            height: 160px;
            background: #FFFFFF;
            box-shadow: inset 0 1px 6px 0 rgba(255, 255, 255, 0.50);
            border-radius: 6px;
        }

        .titleIcon {
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
            background-image: url("./assets/biaoqian@2x.png");
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            width: 70px;
            height: 23px;
            position: absolute;
            left: 50%;
            top: -1px;
            transform: translateX(-50%);
        }

        .icon {
            position: absolute;
            width: 37px;
            height: 34px;
            right: 5%;
            top: 5%;
        }

        .text {
            position: relative;
            top: 30%;
            font-size: 16px;
            color: #ED3E5B;
        }

        .text p {
            position: relative;
            padding-left: 30px;
            margin-bottom: 10px;
        }

        .text img {
            width: 19px;
            height: 17px;
            position: relative;
            left: -10px;
            top: 3px;
        }

        .icon2 {
            position: absolute;
            width: 28px;
            height: 25px;
            left: 4%;
            top: 7%;
        }

        .title {
            font-size: 16px;
            color: #ED3E5B;
            text-align: center;
            position: absolute;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
        }

        .btn2 {
            position: absolute;
            bottom: 12%;
            background: #FD617C;
            border: 1px solid #FFFFFF;
            border-radius: 4px;
            width: 42%;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            color: #FFFFFF;
            text-align: center;
        }


        .top {
            position: relative;
            width: 88%;
            height: 77px;
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;

        }

        .topitem {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 10px;
            font-size: 14px;
            color: #333333;
            text-align: center;
        }

        .topitem img {
            position: relative;
            top: -5%;
            transform: scale(0.5);
        }

        .topitem .toptext {
            position: relative;
            bottom: 15%;
        }


    </style>
</head>
<body>
<div id="app">
    <p class="logo">相亲寻缘登录</p>
    <input id="phone" type="text" class="inp" value="" placeholder="请输入手机号">
    <div class="verification-container">
        <input id="yzm" type="text" class="inpyzm" value="" placeholder="请输入验证码">
        <button class="vCode" onclick="sentMsg()"><span>发送验证码</span></button>
        <div class="checkbox-container">
            <input type="checkbox" id="agreement" class="checkbox" onclick="changeInput()">
            <label for="agreement" class="checkbox-label">
                <p class="xieyi">《用户协议》《隐私政策》《服务合同》《个性推荐》</p>
            </label>
            <p class="xieyi01">《青少年个人信息保护》</p>
        </div>
    </div>
    <button class="vCodeLogin" onclick="login()"><span>登录</span></button>

</div>
</body>

<script>
    var flag = false;
    $(function() {
        getDeviceId();
    });

    function changeInput() {
        flag = !flag;
    }

    function sentMsg() {
        // 获取手机号
        var phone = $('#phone').val();
        if (!phone) {
            alert("手机号不能为空！");
            return;
        }

        // ajax获取数据
        $.ajax({
            url: "http://jk.xmll.xyz/SjDxYz.aspx?MP=" + phone, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function(response) { // 请求成功时的回调函数
                console.log(response); // 在控制台打印服务器返回的数据
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                console.error(error); // 在控制台打印错误信息
            }
        });
    }

    function login() {
        var phone = $('#phone').val();
        var yzm = $('#yzm').val();

        if (!phone) {
            alert("请输入手机号");
            return
        }

        if (!yzm) {
            alert("请输入验证码");
            return
        }

        if (!flag) {
            alert("请同意用户协议");
            return
        }

        var url = "http://jk.xmll.xyz/jk/jkFl/hy.ashx?id=21001&sb=" + getDeviceId() + "&mbid="+phone+"&AA="+yzm+"&AB=0";

        // ajax获取数据
        $.ajax({
            url: url, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function(response) { // 请求成功时的回调函数
                console.log(response); // 在控制台打印服务器返回的数据
                if (response.code == 1) {
                    //alert(response.msg)
                    window.location.href = "./xiangQin.html";
                } else {
                    alert("登录失败");
                }
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                console.error(error); // 在控制台打印错误信息
            }
        });
    }
</script>

</html>
